<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <c-select
          v-model="params['is_pro_dir.eq']"
          clearable
          placeholder="是否省直"
          :options="{
            0: '否',
            1: '是',
          }"
          @change="getAllData()"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <c-select
          v-model="params['is_history.eq']"
          clearable
          placeholder="是否历史数据"
          :options="{
            0: '历史数据(否)',
            1: '历史数据(是)',
          }"
          @change="getAllData()"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <c-select
          v-model="seachParams"
          clearable
          placeholder="项目状态"
          :options="searchOptions"
          @change="setSeachParams"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <c-select
          placeholder="放款登记状态"
          v-model="params['loan_approval_status.in']"
          :options="{
            '0,1,2': '未登记',
            3: '已通过',
            4: '放款登记拒绝',
          }"
          clearable
          @change="getAllData()"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          class="date-picker-ml"
          v-model="queryDate"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="-"
          start-placeholder="放款日期(含)"
          end-placeholder="放款日期(含)"
          value-format="yyyy-MM-dd"
          @change="handleDateQuery"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          type="date"
          class="w-100"
          value-format="yyyy-MM-dd"
          placeholder="放款审批结束时间小于"
          v-model="params['res_corp_date_loan.lte']"
          @change="getAllData()"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          type="date"
          class="w-100"
          value-format="yyyy-MM-dd"
          placeholder="放款审批结束时间大于"
          v-model="params['res_corp_date_loan.gte']"
          @change="getAllData()"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button @click="getAllData()">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="card my-2">
      <div class="card-body" v-loading="countLoading">
        <span class="h5 text-muted">
          项目共计：
          <span class="text-danger">{{ tableCount }}</span>
        </span>
        <span class="h5 text-muted ml-5">
          放款金额合计：
          <span class="text-danger">{{ tableFunds || '-' }}</span>
          万元
        </span>
      </div>
    </div>

    <c-table
      border
      class="table-sm"
      v-loading="loading"
      :columns="tableColumns"
      @row-click="selectRow"
      :data="tableData"
    ></c-table>

    <detail-dialog
      :visible.sync="viewVisible"
      :other-params="viewParams"
      :title="viewTitle"
    ></detail-dialog>
  </div>
</template>

<script>
import { searchOptions } from '@/cadmin/views/org/CreditCount'
import DetailDialog from '@/cadmin/views/count28/DetailDialog'
export default {
  components: {
    DetailDialog,
  },
  data() {
    return {
      searchOptions,
      loading: false,
      tableData: [],
      tableColumns: [
        { attrs: { label: '机构名称', prop: 'service_name' } },
        { attrs: { label: '项目数', prop: 'p' } },
        { attrs: { label: '放款金额', prop: 'p1' } },
        { attrs: { label: '申请金额', prop: 'p2' } },
        { attrs: { label: '在保余额', prop: 'p3' } },
      ],
      params: {
        groupFields: 'service_id',
        fields: ['service_name', 'service_id'],
        groupFunc:
          'count(customer_related.service_id),round(sum(reply_funds)),round(sum(apply_funds)),round(sum(left_funds))',
        create_time: '',
        'gua_type.eq': '4',
        'submit_type.neq': 1,
        'is_history.eq': '0',
      },
      serviceName: '',
      seachParams: 'loan_approval_status=3',

      tableCount: 0,
      tableFunds: 0,
      countLoading: false,
      viewVisible: false,
      viewTitle: '',
      viewParams: {},
      queryDate: [],
    }
  },

  created() {
    this.setSeachParams(this.seachParams)
  },
  methods: {
    getSelectDates(data) {
      if (!data || !data.length) {
        return ['', '']
      }
      let startTime = ''
      let endTime = ''
      const date = new Date(data[0])
      startTime = date
        ? `${date.getFullYear()}-${(date.getMonth() + 1 + '').padStart(2, 0)}-${date.getDate()}`
        : ''
      endTime = date
        ? `${new Date(data[1]).getFullYear()}-${(new Date(data[1]).getMonth() + 1 + '').padStart(
            2,
            0
          )}-${new Date(data[1]).getDate() + 1}`
        : ''
      return [startTime, endTime]
    },
    handleDateQuery() {
      const dates = this.getSelectDates(this.queryDate)

      this.params['load_date.gte'] = dates[0]
      this.params['load_date.lt'] = dates[1]
      this.getAllData()
    },
    selectRow(row) {
      this.viewVisible = true
      this.viewTitle = row.serviceName || '' + '项目详情'
      this.viewParams = {
        ...this.params,
        fields: '',
        groupFields: '',
        groupFunc: '',
        'service_id.eq': row.service_id || '',
      }
    },
    getCountData() {
      this.countLoading = true
      this.$api
        .getData('credit', 'customer_related', { ...this.params, groupFields: '' })
        .then(res => {
          const data = res?.data?.[0] ?? {}
          this.tableCount = data.p || 0
          this.tableFunds = data.p1 || 0
        })
        .finally(() => {
          this.countLoading = false
        })
    },
    setSeachParams(a) {
      const data = this.searchOptions.find(item => item.value === a) || {}
      const params = data.params || {}
      this.params = {
        ...params,
        'is_history.eq': this.params['is_history.eq'],
        groupFunc: this.params.groupFunc,
        fields: this.params.fields,
        groupFields: this.params.groupFields,
        'gua_type.eq': this.params['gua_type.eq'],
        'submit_type.neq': this.params['submit_type.neq'],
      }
      this.getData()
      this.getCountData()
    },
    getAllData() {
      this.getData()
      this.getCountData()
    },
    getData() {
      this.loading = true
      this.$api
        .getData('credit', 'customer_related', this.params, { service_name: 'desc' })
        .then(res => {
          this.tableData = res.data || []
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
}
</script>
<style lang="scss" scoped></style>
